<template>
  <el-badge :value="props.count" class="category-card"
            :style="{'background-color': props.categoryItem.color}"
            @click="selectCategoryClick">
    <span class="title">{{ props.categoryItem.title }}</span>
    <span class="sub-title">{{ props.categoryItem.subTitle }}</span>
  </el-badge>
</template>

<script setup lang="ts">
import { defineProps, PropType } from 'vue'
import { IAnniversaryCategory } from '@/types/anniversary.ts'
import { useAnniversaryStore } from '@/store/anniversary.ts'
import { useRouter } from 'vue-router'

const props = defineProps({
  categoryItem: {
    required: true,
    type: Object as PropType<IAnniversaryCategory>
  },
  count: {
    required: true,
    type: Number
  }
})

const router = useRouter()
const anniversaryStore = useAnniversaryStore()

const selectCategoryClick = () => {
  anniversaryStore.queryInfo.category = props.categoryItem?.name as string
  router.push({ name: 'AnniversaryList' })
}
</script>

<style scoped lang="scss">
.category-card {
  height: 90px;
  width: 100%;
  // width: 160px;
  border-radius: 10px;
  background-color: #FFFFFF;

  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  color: #FFFFFF;

  .title {
    font-weight: bold;
    font-size: 1.5rem;
  }

  .sub-title {
    font-size: 1.2rem;
  }
}
</style>
